<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>微信聊天室</title>
        <link rel="stylesheet" href="styles/normalize.css">
        <link rel="stylesheet" href="styles/reset.css">
        <link rel="stylesheet" href="styles/chart.css">
    </head>
    <body>
        <div id="chart-container">
            <div class="chart-user-list" id="chart-user-list">
                <div class="user-item">
                    <img src="images/avatar/15.jpg" alt="">
                    未知名
                </div>
            </div>
            <div class="chart-main-area">
                <div class="chart-main-title">
                    <h1>微信聊天室(<span id="userNumber"></span>人)-<span id="currentUser"></span></h1>
                </div>
                <div class="chart-list" id="chart-list">
                    <div class="user-logined" id="user-logined"><span id="logined-user"></span>上线了</div>
                    <!-- <div class="chart-item">
                        <div class="user-face"><img src="images/avatar/11.jpg" alt=""></div>
                        <div class="user-message">111</div>
                    </div> -->
                </div>
                <div class="chart-form">
                    <div><textarea class="chart-form-message" id="message"></textarea></div>
                    <div><input type="button" id="send" class="chart-form-send" value="发表"></div>
                </div>
            </div>
        </div>
        <script src="scripts/socket.io.js"></script>
        <script>
            // 隐藏上线提示
            let loginInfo = document.getElementById('user-logined');
            loginInfo.style.display = 'none';

            let client = io('ws://127.0.0.1:4000');
            // 接收在线人数的更新
            client.on('countChanged', (msg)=>{
                let span = document.getElementById("userNumber");
                span.innerHTML = msg;
            });

            // 接收消息
            client.on('textmsg', (msg)=>{
                console.log(msg)
                // 把接收到的消息上屏
                let list = document.getElementById('chart-list');
                let div = document.createElement('div');
                div.className = 'chart-item';
                div.innerHTML = `<div class="user-face">
                        <img src="images/avatar/${msg.avatar}" alt=""></div>
						<div>${decodeURI(msg.name)}</div>
                        <div class="user-message">${msg.msg}</div>`;
                list.appendChild(div);
                console.log(list.scrollTop)
                console.log(list.scrollHeight)
                list.scrollTop = list.scrollHeight
            });

            // 发送消息
            let btnSend = document.getElementById('send');
            btnSend.onclick = ()=>{
                let textarea = document.getElementById('message');
                let msg = textarea.value;
                // 验证msg
                if (msg.trim()){
                    // 获取name与avatar，一起发给服务器
                    let querystr = location.search.substr(1);
                    let name = querystr.split('&')[0].split('=')[1]
                    let avatar = querystr.split('&')[1].split('=')[1]

                    client.emit('textmsg', 
                        {name: name, avatar:avatar, msg:msg});
                    textarea.value = "";
                }
            };
        </script>
    </body>
</html>